// 1. 初始化图片裁剪器
var $image = $('#image')

// 2. 裁剪选项
var options = {
  aspectRatio: 400 / 280,//宽高比 默认宽高的80%
  preview: '.img-preview'//指定预览区
}

// 3. 初始化裁剪区域
$image.cropper(options)

// ---------------------- 获取分类，渲染到下拉框的位置 ------------------
var form = layui.form;
// 1. 获取真实的分类，渲染到下拉框的位置
$.ajax({
  url: '/my/category/list',
  success: function (res) {
    // console.log(res)
    let arr = [];
    res.data.forEach(item => {
      arr.push(`<option value="${item.id}">${item.name}</option>`);
    })
    // $('#category').append(str);
    $('select[name=cate_id]').append(arr.join(''));
    // 更新渲染
    // form.render('select', 'lay-filter属性值');
    form.render('select');
  }
});

//把textarea 多行文本框换成 在线文本编辑器
initEditor()

//单击按钮触发文件域
$('button:contains("选择封面")').on('click', function () {
  $('input[name=file]').trigger('click')
})

//当文件域内容改变后更换剪裁去的图片
$('#file').on('change', function () {
  //获取文件列表
  let files = this.files
  console.log('文件列表' + files);
  if (files.length > 0) {
    //把更换的图片的对象 转换成url
    let url = URL.createObjectURL(files[0])
    //更换剪裁区图片  销毁剪裁取-》更换图片-》新建剪裁取
    $image.cropper('destroy').attr('src', url).cropper(options)
  }
})
//表单提交
$('form').on('submit', function (e) {
  e.preventDefault()
  let fd = new FormData(this)
  fd.delete('file')
  //修改
  fd.set('content', tinyMCE.activeEditor.getContent())
  //剪裁图片
  let canvas = $image.cropper('getCroppedCanvas', { width: 400, height: 280 })
  canvas.toBlob(blob => {
    // blob对象 二进制大对象 把他追加到formdata中 会自动转换成文件对象
    fd.append('cover_img', blob)
    //检查fd里的数据
    // fd.forEach((value, key) => {
    //   console.log(key, value);
    // })

    $.ajax({
      type: 'POST',
      url: '/my/article/add',
      data: fd,
      processData: false,
      contentType: false,
      success: function (res) {
        if (res.status === 0) {
          layer.msg(res.message, { time: 1000 }, function () {
            location.href = '../wz-List.html'
          })
        } else {
          layer.msg(res.message)
        }
      }
    })
  })
})